<template>
  <div>
    <div class="code">
      <Button @click="listenWebsocket">开始监听 websocket</Button>
      <Button class="mal-2" @click="closeWebsocket">停止监听 websocket</Button>
      <div class="websocket-message bor-all mat-2" v-html="wsMessage"></div>
    </div>
  </div>
</template>
<script>
import boleanWebsocket from '@/mixins/boleanWebsocket'
export default {
  mixins: [boleanWebsocket],
  data () {
    return {
      wsMessage: ''
    }
  },
  methods: {
    // 开始监听 websocket
    listenWebsocket () {
      this.createWebSocket('wss://192.168.166.43/ws/device/lobby/')
    },
    // 处理 websocket 返回的数据
    handleWebsocketMessage (message) {
      this.wsMessage = this.wsMessage ? `${this.wsMessage}<br>${message.data}` : message.data
    },
    // 停止监听 websocket
    closeWebsocket () {
      // eslint-disable-next-line no-unused-expressions
      this.ws ? this.ws.close() : ''
    }
  }
}
</script>
<style lang="scss">
.websocket-message {
  overflow-y: auto;
  border-radius: $border-radius-small;
  @include w-h(500px, 300px);
}
</style>
